<template>
  <div>
    <div class="trans">
      <div class="station start" @click="toSelectStart">
        <span ref="startStation">{{startStation.name}}</span>
      </div>
      <div class="btn fa fa-exchange" @click.self="exchangeStation"></div>
      <div class="station end" @click="toSelectEnd">
        <span ref="endStation">{{endStation.name}}</span>
      </div>
    </div>

    <div v-transfer-dom>
      <popup v-model="showSelectStation" position="right" width="100%" height="100%" class="popup-wrapper">
        <div style="height: 100%; background: #fff;">
          <v-header :title="selectType == 0 ? '出发站' : '到达站'" :handleClick="true" @back="showSelectStation = false">
            <!-- <p slot="right" @click="submitSelectStation">确定</p> -->
          </v-header>
          <div class="search-input">
            <div class="around" ref="start">
              <input v-model="inputStartStation" placeholder="出发站(gy/贵阳/guiyang)" @focus="focus(0)">
              <div class="close fa fa-times" v-show="selectType == 0 && inputStartStation.length > 0" @click="inputStartStation = ''"></div>
            </div>
            <div class="around" ref="end">
              <input v-model="inputEndStation" placeholder="到达站(kl/凯里/kaili)" v-if="ticketType === 0" @focus="focus(1)">
              <input v-model="inputEndStation" placeholder="到达站(lp/黎平/liping)" v-if="ticketType === 1" @focus="focus(1)">
              <div class="close fa fa-times" v-show="selectType == 1 && inputEndStation.length > 0" @click="inputEndStation = ''"></div>
            </div>
          </div>
          <div :style="{height: indexListHeight + 'px'}">
            <index-list v-if="!showSearch" :data="stationIndexList" :show="showSelectStation" @select="selectItem">
            </index-list>
            <div v-else class="search-list">
              <p class="search-title">{{searchTitle}}</p>
              <ul>
                <li class="index-list-item border-bottom-1px" v-for="(item, index) in searchList" :key="index" @click="selectItem(item)">
                  {{item.name}}
                </li>
              </ul>
            </div>
          </div>
        </div>
      </popup>
    </div>
  </div>
</template>

<script>
import VHeader from '@/components/v-header/v-header'
import IndexList from '@/components/index-list/index-list'
import { TransferDom, Popup } from 'vux'

import { isIphoneX } from '@/assets/js/brower'
import animations from 'create-keyframe-animation'

export default {
  model: {
    prop: 'value',
    event: 'exchange'
  },
  props: {
    value: {
      type: Array,
      default: ['', '']
    },
    stationList: {
      type: Array,
      default: []
    },
    // 0 火车 1 飞机 2 汽车
    ticketType: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      showSearch: false,
      showSelectStation: false,
      selectType: '',
      startStation: this.value[0],
      endStation: this.value[1],
      inputStartStation: this.value[0].name,
      inputEndStation: this.value[1].name,
      searchList: []
    }
  },
  directives: {
    TransferDom
  },
  components: {
    IndexList, VHeader, Popup
  },
  computed: {
    searchTitle() {
      if (this.ticketType === 0) {
        return this.searchList.length > 0 ? '为你找到了以下火车站：' : '没有结果'
      } else if (this.ticketType === 1) {
        return this.searchList.length > 0 ? '为你找到了以下飞机站：' : '没有结果'
      }
    },
    stationIndexList() {
      let list = []
      if (this.ticketType === 0) {
        this.stationList.forEach(item => {
          item.name = item.stationName
          const indexName = item.stationSpell.substr(0, 1).toUpperCase()
          const findObj = list.find(o => o.name === indexName)
          if (findObj) {
            findObj.items.push(item)
          } else {
            list.push({
              name: indexName,
              items: [item]
            })
          }
        })
      } else if (this.ticketType === 1) {
        this.stationList.forEach(item => {
          item.name = item.cityName
          const indexName = item.airNameSpell.substr(0, 1).toUpperCase()
          const findObj = list.find(o => o.name === indexName)
          if (findObj) {
            findObj.items.push(item)
          } else {
            list.push({
              name: indexName,
              items: [item]
            })
          }
        })
      }
      return list
    }
  },
  created() {
    this.indexListHeight = window.innerHeight - 108 - 24
    if (isIphoneX()) {
      this.indexListHeight = window.innerHeight - 108 - 34
    }
  },
  methods: {
    selectItem(item) {
      this.selectType ? this.endStation = item : this.startStation = item
      this.exchange([this.startStation, this.endStation])
      this.showSelectStation = false
    },
    toSelectStart() {
      this.selectType = 0
      this.showSelectStation = true
      this.showSearch = false
    },
    toSelectEnd() {
      this.selectType = 1
      this.showSelectStation = true
      this.showSearch = false
    },
    exchangeStation(e) {
      // 防止重复点击
      if (this.handleClick) {
        return
      }
      this.handleClick = true
      // 添加动画
      e.target.classList.add('rotate')
      this.slideRightAnimation()
      this.slideLeftAnimation(() => {
        e.target.classList.remove('rotate')
        this.handleClick = false
        let tmp = this.startStation
        this.startStation = this.endStation
        this.endStation = tmp
        this.exchange([this.startStation, this.endStation])
      })
    },
    exchange(val) {
      this.$emit('exchange', val)
    },
    slideRightAnimation() {
      const distance = (this.$refs.endStation.offsetLeft + this.$refs.endStation.offsetWidth) - (this.$refs.startStation.offsetLeft + this.$refs.startStation.offsetWidth)
      animations.registerAnimation({
        name: 'slideRight',
        animation: {
          0: { transform: 'translateX(0)' },
          100: { transform: `translateX(${distance}px)` }
        },
        presets: {
          duration: 500,
          resetWhenDone: true,
          fillMode: 'none'
        }
      })
      animations.runAnimation(this.$refs.startStation, 'slideRight')
    },
    slideLeftAnimation(callback) {
      const distance = this.$refs.endStation.offsetLeft - this.$refs.startStation.offsetLeft
      animations.registerAnimation({
        name: 'slideLeft',
        animation: {
          0: { transform: 'translateX(0)' },
          100: { transform: `translateX(-${distance}px)` }
        },
        presets: {
          duration: 500,
          resetWhenDone: true,
          fillMode: 'none'
        }
      })
      animations.runAnimation(this.$refs.endStation, 'slideLeft', callback)
    },
    focus(type) {
      this.selectType = type
    },
    inputChange() {
      let value = this.selectType ? this.inputEndStation : this.inputStartStation
      if (value === '') {
        this.showSearch = false
      } else {
        this.showSearch = true
      }
      value = value.toLowerCase()
      this.searchList = this.stationList.filter(item => {
        return item.name === value || item.stationSpell === value || item.stationSpellAbbreviated === value || item.stationSpellCode === value
      })
    }
  },
  watch: {
    value(val) {
      this.startStation = val[0]
      this.endStation = val[1]
    },
    showSelectStation(val) {
      if (val) {
        this.showSearch = false
        this.startStation = this.value[0]
        this.endStation = this.value[1]
        this.inputStartStation = this.value[0].name
        this.inputEndStation = this.value[1].name
      }
    },
    inputStartStation() {
      this.inputChange()
    },
    inputEndStation() {
      this.inputChange()
    },
    selectType(val) {
      if (val === 0) {
        this.$refs.start.classList.add('active')
        this.$refs.end.classList.remove('active')
      } else {
        this.$refs.end.classList.add('active')
        this.$refs.start.classList.remove('active')
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/css/variable.styl'

.trans
  display flex
  justify-content space-between
  align-items center
  overflow-x hidden
  .station
    font-size 21px
    border-bottom 1px solid $color-border
    width calc(((100% - 100px) / 2))
    padding 9px 0
    span
      display inline-block
  .start
    text-align left
  .end
    text-align right
  .btn
    width 42px
    height 42px
    line-height 42px
    border-radius 50%
    border 1px solid $color-border
    text-align center
    color #444
    font-size 21px
.search-input
  padding 15px 12px
  background $color-theme
  display flex
  justify-content space-between
  margin-top -1px
  .around
    border-radius 4px
    height 38px
    width calc(45% - 28px)
    padding 0 9px
    background #fff
    overflow hidden
    position relative
    .close
      position absolute
      right 3px
      top 8px
      width 24px
      height 24px
      border-radius 50%
      background $color-background
      text-align center
      line-height 24px
      color #666
      font-size 14px
    input
      border inherit
      width 100%
      height 100%
      overflow hidden
      font-size $font-size-large
      box-sizing border-box
      caret-color blue
      &:focus
        outline none
        color $color-theme
  .active
    width calc(55% - 42px)
    padding-right 33px
    input
      color $color-theme
.search-list
  .search-title
    padding 10px 10px 10px 16px
    line-height 1
    font-size 14px
    color #666
    background #f0f0f0
  .index-list-item
    position relative
    height 50px
    line-height 50px
    padding 0 16px
    font-size $font-size-title
    color #333
    &:last-child
      border-bottom none
  .border-bottom-1px
    border-bottom 0.5px solid rgba(238, 238, 238, 0.8)
.rotate
  transition 0.5s
  transform rotate(180deg)
</style>
